<template>
  <a-modal title="详情" :width="560" :visible="visible" :footer="null" @cancel="$emit('close')">
    <div class="row">
      <div class="label">账号：</div>
      <div class="value">{{ info.userName || '/' }}</div>
    </div>
    <div class="row">
      <div class="label">昵称：</div>
      <div class="value">{{ info.nickName || '/' }}</div>
    </div>
    <div class="row">
      <div class="label">账号类型：</div>
      <div class="value">{{ accountTypeMap[info.accountType] || '/' }}</div>
    </div>
    <div class="row">
      <div class="label">状态：</div>
      <div class="value">{{ statusMap[info.status] || '/' }}</div>
    </div>
    <div class="row">
      <div class="label">创建时间：</div>
      <div class="value">{{ getTime(info.createTime) }}
      </div>
    </div>
  </a-modal>
</template>

<script>
import moment from 'moment';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    default: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      info: {},
      accountTypeMap: {
        0: '管理员账户',
        1: '主账户',
        2: '子账户',
      },
      statusMap: {
        0: '启用',
        1: '禁用',
      },
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.info = JSON.parse(JSON.stringify(this.default));
      } else {
        this.info = {};
      }
    },
  },
  methods: {
    getTime(time) {
      if (!time) return '/';
      return moment(time).format('YYYY-MM-DD HH:mm:ss');
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  margin-bottom: 20px;
}

.label {
  margin-bottom: 6px;
  text-align: right;
  min-width: 72px;
  font-weight: bold;
}

.value {
  flex: 1;
}
</style>
